<template>
  <div>
    <Input type="text" v-model="searchKeyword" placeholder="Search..." />

    <ul v-if="filteredAndHighlightedItems.length > 0">
      <li v-for="item in filteredAndHighlightedItems" :key="item.id">
        <span v-html="item.highlightedLabel"></span>
      </li>
    </ul>

    <!-- <edit v-slot="slotProps"> -->
    <edit>
      <!-- {{ slotProps.user[0].label + slotProps.searchKeyword }} -->
      <template #header>
        <h1>Here might be a page title</h1>
      </template>
      <!-- 
      <p>A paragraph for the main content.</p>
      <p>And another one.</p> -->
      <!-- <template v-slot:default="slotProps">
        {{ slotProps.user[0].label + slotProps.searchKeyword }}
      </template> -->

      <template #footer>
        <p>Here's some contact info</p>
      </template>

      <template #zh="slotProps">
        {{ slotProps.user[0].label + slotProps.searchKeyword }}
      </template>
    </edit>
  </div>
</template>

<script>
  import Vue from 'vue'
  import { Input } from 'element-ui'
  import edit from './edit.vue'
  Vue.use(Input)
  export default {
    components: { Input, edit },
    data() {
      return {
        items: [
          { id: 1, label: 'Apple1' },
          { id: 2, label: 'Banana2' },
          { id: 3, label: 'Cherry3' },
        ],
        searchKeyword: '',
      }
    },
    beforeRouteEnter(to, from, next) {
      $setStore('waiting', false)
      next()
    },
    computed: {
      filteredAndHighlightedItems() {
        const keyword = this.searchKeyword.toLowerCase()

        return this.items
          .map(item => ({
            ...item,
            highlightedLabel: this.highlight(item.label, keyword),
          }))
          .filter(item => item.highlightedLabel.includes(keyword))
      },
    },
    methods: {
      highlight(text, keyword) {
        const regex = new RegExp(keyword, 'gi')
        return text.replace(regex, `<span class="highlight">$&</span>`)
      },
    },
  }
</script>

<style scoped>
  .highlight {
    background-color: yellow;
  }
</style>
